<template>
  <div>
    <div class="history">
      <div class="msg-item" v-for="item in msgList" :key="item.id">
        <img src="https://cdn-image.kapeixi.cn/web/images/headImg.png" />
        <div>
          <h2>
            {{ item.username }}<small>{{ item.gmtCreate }}</small>
          </h2>
          <p class="content">{{ item.remark }}</p>
        </div>
      </div>
    </div>
    <div class="mt10 remark-wid">
      <a-form layout="vertical" :model="formState">
        <a-form-item label="留言:"
          ><a-textarea
            v-model:value="formState.remarkValue"
            placeholder="请留言"
        /></a-form-item>
      </a-form>
    </div>
    <div style="text-align: right">
      <a-button class="mr10" @click="close">取消</a-button>
      <a-button type="primary" class="ml10" @click="send">发送</a-button>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import useAPI from 'UseApi'

const APIS = useAPI(null, ['4788'])
const props = defineProps({
  bizId: {
    type: [Number, String]
  },
  bizType: {
    type: [Number, String]
  }
})
const msgList = ref([])
const formState = reactive({
  remark: ''
})
const emit = defineEmits(['update:visible'])
const close = () => {
  emit('update:visible', false)
}

/**
 * 获取供应商留言历史
 */
const getMessageList = () => {
  APIS.message_board_list_remark_post_(
    {
      bizId: props.bizId,
      bizType: props.bizType
    },
    msgList
  )
}

const send = () => {
  APIS.message_board_add_remark_post_(
    {
      bizId: props.bizId,
      bizType: props.bizType,
      remark: formState.remarkValue
    },
    () => {
      formState.remarkValue = null
      getMessageList()
    }
  )
}

watch(
  () => props.bizId,
  () => {
    getMessageList()
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss">
.history {
  margin-bottom: 50px;
  height: 450px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.msg-item {
  width: 100%;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #e5e3e3;
}
.msg-item img {
  width: 50px;
  height: 50px;
  border-radius: 10px;
}
.msg-item div {
  margin-left: 10px;
  width: 100%;
}
.msg-item div h2 {
  font-size: 14px;
}
.msg-item div h2 small {
  font-size: 12px;
  color: #c4c0c0;
  font-weight: normal;
  margin-left: 10px;
}
.msg-item div p.content {
  font-size: 14px;
  margin: 5px 0;
  word-wrap: break-word;
  white-space: pre-wrap;
  min-height: 20px;
}
.remark-wid {
  margin: 0 10px;
}

.mr10 {
  margin-right: 10px;
}
.ml10 {
  margin-left: 10px;
}
.mt10 {
  margin-top: 10px;
}
.no-remark {
  margin-bottom: 50px;
  height: 100px;
}
</style>
